<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
    <form action="#" @submit.stop.prevent="submitForm">

        姓名(文本): <input type="text" v-model="name">
        <br>
        性别(单选按钮)：
        <input name="sex" type="radio" v-model="sex" value="1"> 男
        <input name="sex" type="radio" v-model="sex" value="0"> 女
        <br>
        技能(多选框)：
        <input type="checkbox" name="skills" v-model="skills" value="java">Java开发
        <input type="checkbox" name="skills" v-model="skills" value="vue">Vue.js开发
        <input type="checkbox" name="skills" v-model="skills" value="python">Python开发
        <br><br>
        城市(下拉框)：
        <select name="citys" v-model="city">
            <option v-for="item in citys" :value="item.code">{{item.name}}</option>
        </select>
        <br><br>
        说明(多行文本)：<textarea cols="30" rows="5" v-model="desc"></textarea>
        <br><br>
        <button type="submit">提交</button>

    </form>
</div>


<script src="node_modules/vue/dist/vue.js">

</script>

<script>
    new Vue({
        el: '#app',
        data: {
            name: '',
            sex: 0,
            skills: ['vue'],
            citys: [
                {code: 'bj', name: '北京'},
                {code: 'sh', name: '上海'},
                {code: 'sz', name: '深圳'}
            ],
            city: 'sh',
            desc: 'asdasd'
        },
        methods: {
            submitForm() {
                alert(this.name + "," + this.sex + "," + this.skills + "," + this.city + "," + this.desc)
            }
        }
    });
</script>

</body>
</html>
